<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    title="绑定二维码"
    width="40%"
    @close="onClose" 
  >
  <a-row justify="space-between" type="flex" style="flex-direction: column;">
      <a-form v-if="vdata.visible" ref="infoFormModel" :model="vdata.saveObject" :rules="vdata.rules">
        <a-row justify="space-between" type="flex">
          <a-col :span="11">
            <a-form-item label="二维码ID" name="qrcId">
              <a-input v-model:value="vdata.saveObject.qrcId" placeholder="请输入二维码ID" />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="二维码名称" name="qrcAlias">
              <a-input v-model:value="vdata.saveObject.qrcAlias" placeholder="请输入二维码名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row justify="space-between" type="flex">
          <a-col :span="11">
            <a-form-item label="选择门店" name="storeId">
              <a-select v-model:value="vdata.saveObject.storeId" placeholder="请选择门店">
                <a-select-option v-for="d in vdata.storeList" :key="d.storeId" v-model:value="d.storeId">
                  {{ d.storeName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="选择应用" name="appId">
              <a-select v-model:value="vdata.saveObject.appId" placeholder="请选择应用">
                <a-select-option v-for="d in vdata.appList" :key="d.appId" v-model:value="d.appId">
                  {{ d.appName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-col>
          <a-form-item label="状态" name="qrcState">
            <a-radio-group v-model:value="vdata.saveObject.qrcState">
              <a-radio :value="1">启用</a-radio>
              <a-radio :value="0">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="固定金额" name="fixedFlag">
            <a-radio-group v-model:value="vdata.saveObject.fixedFlag">
              <a-radio :value="0">任意金额</a-radio>
              <a-radio :value="1">固定金额</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-if="vdata.saveObject.fixedFlag" label="" name="fixedPayAmount">
            <a-input-number v-model:value="vdata.saveObject.fixedPayAmount" :precision="2" style="width: 130px" /> 元
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="选择页面类型" name="entryPage">
            谨慎选择， 一经填写不可变更。
            <a-radio-group v-model:value="vdata.saveObject.entryPage">
              <a-radio :value="'default'">默认(未指定，取决于二维码是否绑定到微信侧)</a-radio>
              <a-radio :value="'h5'">固定H5页面</a-radio>
              <a-radio :value="'lite'">固定小程序页面</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="支付宝支付方式(仅H5呈现时生效)" name="alipayWayCode">
            <a-radio-group v-model:value="vdata.saveObject.alipayWayCode">
              <a-radio :value="'ALI_JSAPI'">ALI_JSAPI</a-radio>
              <a-radio :value="'ALI_WAP'">ALI_WAP</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
    </a-form>
  </a-row>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose"><close-outlined />取消</a-button>
      <a-button type="primary" @click="handleOkFunc"><check-outlined />保存</a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>

import { req, API_URL_MCH_APP, API_URL_MCH_STORE_LIST, $bindEmptyQr } from '@/api/manage'
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'

// 定义组件参数
const props = defineProps({
  callbackFunc: {type: Function, default: () => {}}
})
const infoFormModel = ref()
const vdata : any = reactive({
  storeList: [] as any, // 门店列表
  appList: [] as any, // 应用列表
  saveObject: {} as any, // 数据对象
  rules: {
    fixedPayAmount: [{ required: true, message: '请输入固定金额', trigger: 'blur', type: 'number', min: 0.01 }],
    storeId: [{ required: true, type: 'number', message: '请选择门店', trigger: 'blur' }],
    appId: [{ required: true, trigger: 'blur', message: '请选择应用' }],
    qrcId: [{ required: true, trigger: 'blur', message: '请输入二维码ID' }],
  },
})


// 弹层打开事件
function show() {
  vdata.visible = true
  req.list(API_URL_MCH_STORE_LIST, { 'pageSize': -1 }).then(res => { // 门店下拉选择列表
      vdata.storeList =  res.records
    })
  req.list(API_URL_MCH_APP, { 'pageSize': -1 }).then(res => { // 应用下拉选择列表
      vdata.appList =  res.records
  })
  vdata.saveObject = { qrcState: 1, fixedFlag: 0, entryPage: 'default', alipayWayCode: 'ALI_JSAPI' } // 重置清空
}

// 点击 【保存】按钮的事件
function handleOkFunc(){
  infoFormModel.value.validate().then((valid: any) =>{
    $bindEmptyQr(vdata.saveObject).then(res => {
      message.success('绑定成功')
      onClose()
      props.callbackFunc() // 刷新列表
    })
  })
}

function onClose() {
  vdata.visible = false
}
defineExpose({show})
</script>
